{#
  This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=products' %}

<li class="m24-c-menu-category mzp-has-drop-down mzp-js-expandable">
  <a class="m24-c-menu-title" href="{{ url('products.landing') }}" aria-haspopup="true" aria-controls="m24-c-menu-panel-products" data-testid="m24-navigation-link-products">{{ ftl('navigation-refresh-products') }}</a>
  <div class="m24-c-menu-panel" id="m24-c-menu-panel-products" data-testid="m24-navigation-panel-products">
    <div class="m24-c-menu-panel-container" data-testid="m24-navigation-menu-products">
      <button class="m24-c-menu-button-close" type="button" aria-controls="m24-c-menu-panel-products">{{ ftl('navigation-refresh-close-products-menu') }}</button>
      <div class="m24-c-menu-panel-content">
        <ul class="m24-mzp-l-content">
          <li>
            <section class="m24-c-menu-item mzp-has-icon">
              <a class="m24-c-menu-item-link" href="{{ url('products.vpn.landing') }}" data-link-text="Mozilla VPN" data-link-position="topnav - products" data-testid="m24-navigation-menu-link-products-vpn">
                <img loading="lazy" src="{{ static('protocol/img/logos/mozilla/vpn/logo.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
                <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-vpn-v2') }}</h2>
              </a>
            </section>
          </li>
          <li>
            <section class="m24-c-menu-item mzp-has-icon">
              {% if LANG.startswith('en-') %}
                {% set monitor_link = url('products.monitor.landing') %}
              {% else %}
                {% set monitor_link = "https://monitor.mozilla.org/?" + utm_params %}
              {% endif %}
              <a class="m24-c-menu-item-link" href="{{ monitor_link }}" data-link-text="Mozilla Monitor" data-link-position="topnav - products">
                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/monitor/logo.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
                <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-monitor-v2') }}</h2>
              </a>
            </section>
          </li>
          <li>
            <section class="m24-c-menu-item mzp-has-icon">
              <a class="m24-c-menu-item-link" href="https://relay.firefox.com/?{{ utm_params }}" data-link-text="Firefox Relay" data-link-position="topnav - products">
                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/relay/logo.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
                <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-firefox-relay') }}</h2>
              </a>
            </section>
          </li>
          <li>
            <section class="m24-c-menu-item mzp-has-icon">
              <a class="m24-c-menu-item-link" href="https://developer.mozilla.org/plus?{{ utm_params }}" data-link-text="MDN Plus" data-link-position="topnav - products">
                <img loading="lazy" src="{{ static('img/logos/mdn/mdn-plus-logo.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
                <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mdn-plus') }}</h2>
              </a>
            </section>
          </li>
          <li>
            <section class="m24-c-menu-item mzp-has-icon">
              <a class="m24-c-menu-item-link" href="https://www.thunderbird.net/?{{ utm_params }}" data-link-text="Thunderbird" data-link-position="topnav - products">
                <img loading="lazy" src="{{ static('img/logos/thunderbird/logo-thunderbird.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
                <h2 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-thunderbird') }}</h2>
              </a>
            </section>
          </li>
        </ul>
        <p class="m24-c-menu-category-link">
          <a href="{{ url('products.landing') }}" data-link-text="Go to all browsers and products" data-link-position="topnav - products">
            {{ ftl('navigation-refresh-all-products') }}
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="m7.24 1.36 5.89 5.89H0v1.5h13.13l-5.89 5.89L8.3 15.7 16 8 8.3.3z"/></svg>
          </a>
        </p>
      </div>
    </div><!-- close .m24-c-menu-panel-container -->
  </div><!-- close .m24-c-menu-panel -->
</li><!-- close products -->
